<template>
  <q-page>
    <div :style="{
      'margin': '0 0 0 0',
      'background-image': 'url(\'statics/img/banner.jpg\')',
      'background': 'rgba(0,0,0,0.4)'
    }">
      <div class="container row q-gutter-md">
        <div class="col-12 text-h1 text-white text-center">Saltybe</div>
        <div class="col-12 text-body1 text-white text-center">Share fun with the world.</div>
      </div>
    </div>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-xs-12 col-md-8">
          <q-card>
            <q-card-section>
              <div class="text-h6">Others looking</div>
            </q-card-section>
            <q-card-section>
              <div class="row q-col-gutter-md" v-if="hotList">
                <div class="col-xs-6 col-xs-4 col-md-3"
                     v-for="item in hotList"
                     :key="item.id">
                  <router-link :to="`/video/${item.vid}`">
                    <div class="row q-gutter-xs">
                      <div class="col-12">
                        <q-img :src="`api/upload/cover/${item.vid}_${item.cover}`"
                               :ratio="4/3"/>
                      </div>
                      <div class="col-12">
                        <q-item-label :lines="1">{{ item.title }}</q-item-label>
                      </div>
                      <div class="col-12">
                        <q-item-label :lines="1" caption>{{ item.username }}</q-item-label>
                      </div>
                      <q-tooltip>{{ item.title }}</q-tooltip>
                    </div>
                  </router-link>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-xs-12 col-md-4">
          <q-card>
            <q-card-section>
              <div class="text-h6">Latest</div>
            </q-card-section>
            <q-card-section>
              <div class="row q-col-gutter-md" v-if="latestList">
                <div class="col-xs-6 col-xs-4 col-md-6"
                     v-for="item in latestList"
                     :key="item.id">
                  <router-link :to="`/video/${item.vid}`">
                    <div class="row q-gutter-xs">
                      <div class="col-12">
                        <q-img :src="`api/upload/cover/${item.vid}_${item.cover}`"
                               :ratio="4/3"/>
                      </div>
                      <div class="col-12">
                        <q-item-label :lines="1">{{ item.title }}</q-item-label>
                      </div>
                      <div class="col-12">
                        <q-item-label :lines="1" caption>{{ item.username }}</q-item-label>
                      </div>
                      <q-tooltip>{{ item.title }}</q-tooltip>
                    </div>
                  </router-link>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  import {Video} from 'src/lib/Video';

  export default {
    name: 'PageIndex',
    data: function () {
      return {
        hotList: null,
        latestList: null
      };
    },
    async mounted() {
      this.hotList = await Video.hot(12);
      this.latestList = await Video.latest(10);
    }
  }
</script>

<style>
  a {
    color: black;
    text-decoration: none;
  }

  .router-link-active {
    color: black;
    text-decoration: none;
  }
</style>
